// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/billboard';

// * -------------------------------------------------------------------------- */
// Hero image

.mzp-c-callout.mzp-t-hero {
    @include at2x('/media/img/mozorg/about/about-hero-xxs.jpg', auto, 400px);
    @include border-box;
    background-repeat: no-repeat;
    background-position: bottom center;
    min-height: 400px;
    background-color: transparent;

    @media #{$mq-xs} {
        @include at2x('/media/img/mozorg/about/about-hero-xs.jpg', auto, 400px);
    }
    @media #{$mq-sm} {
        @include at2x('/media/img/mozorg/about/about-hero-sm.jpg', auto, 400px);
    }
    @media #{$mq-md} {
        @include at2x('/media/img/mozorg/about/about-hero.jpg', auto, 400px);
    }

    .mzp-l-content {
        @include border-box;
        max-width: 830px;
        padding: $layout-md $layout-lg;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
    }

    .mzp-c-callout-desc {
        font-weight: bold;
        margin-bottom: $spacing-2xl;
    }

    .c-callout-cta {
        margin-bottom: 1.25em;
    }
}

// * -------------------------------------------------------------------------- */
// Intro section

.t-shade {
    background: $color-marketing-gray-20;
    background: $color-marketing-gray-20 linear-gradient($color-marketing-gray-20, $color-white 350px);
}

// * -------------------------------------------------------------------------- */
// Page title

.c-page-title {
    @include text-title-sm;
    margin-top: $spacing-xs;
    margin-bottom: $spacing-md;

    @media #{$mq-lg} {
        margin-top: $spacing-2xl - $spacing-lg;
        margin-bottom: $spacing-xl;
    }
}

// * -------------------------------------------------------------------------- */
// Cities

.t-global {
    padding: 0;
    text-align: center;

    .t-global-desc {
        font-size: 18px;
        font-weight: 700;
    }
}

$city-image-size: 106px;

.c-cities {
    @include clearfix;
    margin-bottom: 100px;

    @media #{$mq-md} {
        margin-bottom: 70px;
    }

    @media #{$mq-lg} {
        margin-bottom: 32px;
    }
}

.c-city {
    @include text-body-sm;
    display: block;
    margin: $spacing-2xl;
    position: relative;
    text-align: center;

    &::before {
        content: '';
        display: block;
        height: $city-image-size;
        width: $city-image-size;
        background-size: $city-image-size;
        margin: 0 auto $spacing-md;
    }

    &.c-city-sf::before {
        background-image: url('/media/img/mozorg/about/city-sf.png');
    }

    &.c-city-berlin::before {
        background-image: url('/media/img/mozorg/about/city-berlin.png');
    }

    &.c-city-toronto::before {
        background-image: url('/media/img/mozorg/about/city-toronto.png');
    }
}

.c-city-title {
    @include text-body-md;
    border-bottom: 2px solid #000;
    padding-bottom: $spacing-sm;
    margin: 0 auto $spacing-sm;
    max-width: 200px;
    text-decoration: none;
}

.c-city-desc {
    margin: 0 auto;
    max-width: 200px;

    strong {
        @include font-size(50px);
        font-family: var(--title-font-family);
        display: block;
        font-weight: bold;
        margin-bottom: $spacing-sm;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .c-city {
        margin: $spacing-2xl auto;
        max-width: remify(250px); // rems to account for larger fonts
        padding-left: $city-image-size + ($spacing-xl * 2);

        &::before {
            position: absolute;
            top: 50%;
            left: $spacing-xl;
            margin-top: ($city-image-size * 0.5 * -1) - 3px; // minus half to vertically centre and then -3px to account for the little bits that stick up past the circle part
        }
    }

    .c-city-title {
        border-image: linear-gradient(to top, $color-white 1px, $color-white 1px) 2;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .c-city-desc {
        strong {
            line-height: 1;
        }
    }
}

@media #{$mq-md} {
    .c-city {
        @include grid-half;
        @include bidi(((float, left, right),));
        padding: 0 ($spacing-xl * 0.5);
        margin: $spacing-xl 0;
    }
}

@media #{$mq-lg} {
    .c-city {
        @include grid-third;
    }
}
